<template>
    <div class="view_role">
        <card title="角色管理">
            <template #actions>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    placeholder="按角色名查找"
                    prefix-icon="el-icon-search"
                    clearable
                />
                <el-button type="primary" @click="add">添加角色</el-button>
            </template>
            <template #default>
                <el-table :data="tableData" @selection-change="handleSelect">
                    <el-table-column type="selection" />
                    <el-table-column prop="roleName" label="角色名" />
                    <el-table-column prop="remark" label="备注" />
                    <el-table-column prop="createTime" label="创建时间" />
                    <el-table-column label="操作">
                        <template v-slot="{ row }">
                            <el-button type="text" @click="edit(row)">编辑</el-button>
                            <el-button type="text" @click="_delete(row.roleId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #bottom-left>
                <el-button type="danger" @click="_delete" :disabled="isBatchButtonDisabled">删除所选</el-button>
            </template>
            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 添加/编辑角色对话框 -->
        <el-dialog :visible.sync="visible" :title="dialogTitle" @opened="getMenus" @closed="handleClosed">
            <template #default>
                <el-form label-position="top">
                    <el-form-item label="角色名">
                        <el-input v-model="formData.roleName" />
                    </el-form-item>
                    <el-form-item label="权限">
                        <tree-select
                            v-model="formData.menuIds"
                            value-consists-of="ALL_WITH_INDETERMINATE"
                            :options="menuOptions"
                            :limit="2"
                            showCount
                            multiple
                            append-to-body
                            :z-index="3000"
                            :max-height="360"
                        />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="formData.remark" type="textarea" :rows="3" resize="none" />
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions, getDeletionOptions } from '../../mixins';
import treeSelect from '@riophae/vue-treeselect';

const defaultFormData = {
    roleName: '',
    remark: '',
    menuIds: [],
};
const defaultFormDataCopied = Object.assign({}, defaultFormData);

export default {
    data() {
        return {
            visible: false,
            editing: false,

            tableData: [],
            menus: [],

            formData: defaultFormData,
        };
    },

    components: { treeSelect },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/role/findPageRole',
            paginable: true,
            params: {
                queryString: 'roleName',
            },
        }),

        getDeletionOptions({
            apiurl: '/yxl/role/deleteRole',
            primaryKey: 'roleId',
            params: 'roleIds',
        }),
    ],

    computed: {
        // 对话框标题
        dialogTitle() {
            return this.editing ? '编辑角色' : '添加角色';
        },

        // 菜单选项
        menuOptions() {
            return this.menus.map(function temp(menu) {
                let option = {
                    id: menu.menuId,
                    label: menu.name,
                };

                if (menu.childs && menu.childs.length) {
                    option.children = menu.childs.map(temp);
                }

                return option;
            });
        },
    },

    methods: {

        getMenus() {
            if (this.menus.length) return;

            this.$get('/yxl/menu/findMenu').then(res => {
                this.menus = Object.freeze(res);
            });
        },

        handleClosed() {
            delete this.formData.roleId;
            Object.assign(this.formData, defaultFormDataCopied);
        },

        // 添加
        add() {
            this.visible = true;
            this.editing = false;
        },

        // 编辑
        edit(row) {
            this.editing = true;
            this.formData.roleId = row.roleId;
            this.formData.roleName = row.roleName;
            this.formData.remark = row.remark;
            // 每个角色默认拥有4个权限，需要截取掉后端添加的4个权限菜单id
            this.formData.menuIds = row.menuIds.slice(4);

            this.visible = true;
        },

        // 保存
        save() {
            let data = Object.assign({}, this.formData);
            data.menuIds = data.menuIds.slice().toString();

            this.$put(`/yxl/role/${this.editing ? 'update' : 'save'}Role`, data).then(res => {
                this.visible = false;
                this.query();
            });
        },

        // async save() {
        //     let data = null,
        //         action = this.action;
        //     if (this.action === 'update') {
        //         data = Object.assign({ roleId: this.actionObjectId }, this.form);
        //     } else if (this.action === 'save') {
        //         data = Object.assign({}, this.form);
        //     }

        //     data.menuIds = data.menuIds.toString();

        //     await this.$put(`/yxl/role/${action}Role`, data);

        //     this.visible = false;
        //     this.search();
        // },
    },
};
</script>